<template>
  <div class="article-management">
    <!-- 统计卡片 -->
    <ArticleStatistics
      v-if="showStatistics"
      :statistics="statistics"
      @refresh="loadStatistics"
    />

    <!-- 搜索表单 -->
    <el-card class="search-card" shadow="never">
      <el-form
        ref="searchFormRef"
        :model="searchForm"
        :label-width="SEARCH_FORM_CONFIG.labelWidth"
        class="search-form"
      >
        <el-row :gutter="SEARCH_FORM_CONFIG.gutter">
          <el-col :span="SEARCH_FORM_CONFIG.span">
            <el-form-item label="标题">
              <el-input
                v-model="searchForm.title"
                placeholder="请输入文章标题"
                clearable
                @keyup.enter="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :span="SEARCH_FORM_CONFIG.span">
            <el-form-item label="作者">
              <el-input
                v-model="searchForm.authorName"
                placeholder="请输入作者用户名"
                clearable
                @keyup.enter="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :span="SEARCH_FORM_CONFIG.span">
            <el-form-item label="分类">
              <el-input
                v-model="searchForm.categoryName"
                placeholder="请输入分类名称"
                clearable
                @keyup.enter="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :span="SEARCH_FORM_CONFIG.span">
            <el-form-item label="状态">
              <el-select
                v-model="searchForm.status"
                placeholder="请选择状态"
                clearable
              >
                <el-option
                  v-for="option in ARTICLE_STATUS_OPTIONS"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="SEARCH_FORM_CONFIG.span">
            <el-form-item label="置顶">
              <el-select
                v-model="searchForm.isTop"
                placeholder="请选择置顶状态"
                clearable
              >
                <el-option
                  v-for="option in IS_TOP_OPTIONS"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="SEARCH_FORM_CONFIG.span">
            <el-form-item label="原创">
              <el-select
                v-model="searchForm.isOriginal"
                placeholder="请选择原创状态"
                clearable
              >
                <el-option
                  v-for="option in IS_ORIGINAL_OPTIONS"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="SEARCH_FORM_CONFIG.span">
            <el-form-item label="标签">
              <el-input
                v-model="searchForm.tags"
                placeholder="请输入标签关键词"
                clearable
                @keyup.enter="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :span="SEARCH_FORM_CONFIG.span">
            <el-form-item label="关键词">
              <el-input
                v-model="searchForm.keyword"
                placeholder="全文搜索关键词"
                clearable
                @keyup.enter="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="dateRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                @change="handleDateRangeChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="SEARCH_FORM_CONFIG.span">
            <el-form-item label="排序">
              <el-select
                v-model="searchForm.sortField"
                placeholder="排序字段"
                style="width: 48%; margin-right: 4%"
              >
                <el-option
                  v-for="option in SORT_FIELD_OPTIONS"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
              <el-select
                v-model="searchForm.sortOrder"
                placeholder="排序方向"
                style="width: 48%"
              >
                <el-option
                  v-for="option in SORT_ORDER_OPTIONS"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="SEARCH_FORM_CONFIG.span">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">
                <template #icon>
                  <IconifyIconOnline icon="ep:search" />
                </template>
                搜索
              </el-button>
              <el-button @click="handleReset">
                <template #icon>
                  <IconifyIconOnline icon="ep:refresh" />
                </template>
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 操作栏 -->
    <el-card class="operation-card" shadow="never">
      <div class="operation-bar">
        <div class="left-operations">
          <el-button
            type="success"
            :disabled="!hasSelection"
            @click="handleBatchOperation"
          >
            <template #icon>
              <IconifyIconOnline icon="ep:operation" />
            </template>
            批量操作
          </el-button>
          <el-button type="primary" @click="handleRefresh">
            <template #icon>
              <IconifyIconOnline icon="ep:refresh" />
            </template>
            刷新
          </el-button>
          <el-button type="info" @click="toggleStatistics">
            <template #icon>
              <IconifyIconOnline icon="ep:data-analysis" />
            </template>
            {{ showStatistics ? "隐藏" : "显示" }}统计
          </el-button>
        </div>
        <div class="right-info">
          <span v-if="hasSelection" class="selection-info">
            已选择 {{ selectedArticles.length }} 项
          </span>
          <span class="total-info"> 共 {{ pagination.total }} 条记录 </span>
        </div>
      </div>
    </el-card>

    <!-- 文章列表 -->
    <el-card class="table-card" shadow="never">
      <el-table
        ref="tableRef"
        v-loading="loading"
        :data="articleList"
        stripe
        border
        height="600"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55" />

        <!-- ID列 -->
        <el-table-column prop="id" label="ID" width="80" sortable />

        <!-- 标题列 -->
        <el-table-column
          prop="title"
          label="标题"
          min-width="200"
          show-overflow-tooltip
        />

        <!-- 作者列 -->
        <el-table-column label="作者" width="150">
          <template #default="{ row }">
            <div class="author-info">
              <el-avatar
                :size="32"
                :src="formatAvatarUrl(row.authorAvatar)"
                :alt="row.authorNickName"
                fit="cover"
              >
                <template #default>
                  <IconifyIconOnline icon="ep:user" />
                </template>
              </el-avatar>
              <span class="author-name">{{ row.authorNickName }}</span>
            </div>
          </template>
        </el-table-column>

        <!-- 分类列 -->
        <el-table-column prop="categoryName" label="分类" width="120" />

        <!-- 状态列 -->
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag
              :type="ArticleManagementUtils.getStatusTagType(row.status)"
              size="small"
            >
              {{ ArticleManagementUtils.getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 置顶列 -->
        <el-table-column label="置顶" width="80">
          <template #default="{ row }">
            <el-tag v-if="row.isTop === 1" type="success" size="small"
              >置顶</el-tag
            >
            <span v-else>-</span>
          </template>
        </el-table-column>

        <!-- 原创列 -->
        <el-table-column label="原创" width="80">
          <template #default="{ row }">
            <el-tag v-if="row.isOriginal === 1" type="primary" size="small"
              >原创</el-tag
            >
            <el-tag v-else type="info" size="small">转载</el-tag>
          </template>
        </el-table-column>

        <!-- 浏览量列 -->
        <el-table-column label="浏览量" width="100" sortable>
          <template #default="{ row }">
            {{ ArticleManagementUtils.formatNumber(row.viewCount) }}
          </template>
        </el-table-column>

        <!-- 点赞数列 -->
        <el-table-column label="点赞数" width="100" sortable>
          <template #default="{ row }">
            {{ ArticleManagementUtils.formatNumber(row.likeCount) }}
          </template>
        </el-table-column>

        <!-- 评论数列 -->
        <el-table-column label="评论数" width="100" sortable>
          <template #default="{ row }">
            {{ ArticleManagementUtils.formatNumber(row.commentCount) }}
          </template>
        </el-table-column>

        <!-- 字数列 -->
        <el-table-column prop="wordCount" label="字数" width="100" sortable />

        <!-- 发布时间列 -->
        <el-table-column label="发布时间" width="180" sortable>
          <template #default="{ row }">
            {{ ArticleManagementUtils.formatTime(row.publishTime) }}
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button
                type="primary"
                size="small"
                @click="handleViewDetail(row)"
              >
                详情
              </el-button>
              <el-button
                v-if="row.status === ArticleStatus.PENDING"
                type="success"
                size="small"
                @click="handleAudit(row)"
              >
                审核
              </el-button>
              <el-dropdown
                @command="command => handleSingleOperation(command, row)"
              >
                <el-button type="info" size="small">
                  更多
                  <IconifyIconOnline icon="ep:arrow-down" />
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      v-if="
                        ArticleManagementUtils.checkOperationPermission(
                          row.status,
                          'publish'
                        )
                      "
                      command="publish"
                    >
                      发布
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="
                        ArticleManagementUtils.checkOperationPermission(
                          row.status,
                          'unpublish'
                        )
                      "
                      command="unpublish"
                    >
                      下架
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="
                        ArticleManagementUtils.checkOperationPermission(
                          row.status,
                          'top'
                        )
                      "
                      command="top"
                    >
                      {{ row.isTop === 1 ? "取消置顶" : "置顶" }}
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="
                        ArticleManagementUtils.checkOperationPermission(
                          row.status,
                          'delete'
                        )
                      "
                      command="delete"
                      divided
                    >
                      删除
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="
                        ArticleManagementUtils.checkOperationPermission(
                          row.status,
                          'restore'
                        )
                      "
                      command="restore"
                    >
                      恢复
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :page-sizes="PAGINATION_CONFIG.pageSizes"
          :layout="PAGINATION_CONFIG.layout"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 文章详情对话框 -->
    <ArticleDetailDialog
      v-model:visible="detailDialogVisible"
      :article-id="currentArticleId"
      @refresh="loadArticleList"
    />

    <!-- 文章审核对话框 -->
    <ArticleAuditDialog
      v-model:visible="auditDialogVisible"
      :article="currentArticle"
      @refresh="loadArticleList"
    />

    <!-- 批量操作对话框 -->
    <BatchOperationDialog
      v-model:visible="batchDialogVisible"
      :selected-articles="selectedArticles"
      @refresh="loadArticleList"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, TableInstance } from "element-plus";
import {
  getArticleListApi,
  getArticleStatisticsApi,
  publishArticleApi,
  unpublishArticleApi,
  toggleTopArticleApi,
  deleteArticleApi,
  restoreArticleApi,
  type ArticleInfo,
  type ArticleListQuery,
  type ArticleStatistics as ArticleStatisticsType,
  ArticleStatus,
  ArticleManagementUtils
} from "@/api/article-management";
import {
  ARTICLE_STATUS_OPTIONS,
  IS_TOP_OPTIONS,
  IS_ORIGINAL_OPTIONS,
  SORT_FIELD_OPTIONS,
  SORT_ORDER_OPTIONS,
  ARTICLE_TABLE_COLUMNS,
  PAGINATION_CONFIG,
  SEARCH_FORM_CONFIG,
  MESSAGES,
  DEFAULT_QUERY_PARAMS
} from "@/constants/article";
import ArticleStatistics from "./components/ArticleStatistics.vue";
import ArticleDetailDialog from "./components/ArticleDetailDialog.vue";
import ArticleAuditDialog from "./components/ArticleAuditDialog.vue";
import BatchOperationDialog from "./components/BatchOperationDialog.vue";

defineOptions({
  name: "ArticleManagement"
});

// 响应式数据
const loading = ref(false);
const showStatistics = ref(true);
const detailDialogVisible = ref(false);
const auditDialogVisible = ref(false);
const batchDialogVisible = ref(false);

// 表单引用
const searchFormRef = ref<FormInstance>();
const tableRef = ref<TableInstance>();

// 搜索表单
const searchForm = reactive<ArticleListQuery>({
  ...DEFAULT_QUERY_PARAMS,
  title: "",
  authorName: "",
  categoryName: "",
  status: undefined,
  isTop: undefined,
  isOriginal: undefined,
  tags: "",
  keyword: "",
  startTime: "",
  endTime: ""
});

// 日期范围
const dateRange = ref<[string, string] | null>(null);

// 分页信息
const pagination = reactive({
  current: DEFAULT_QUERY_PARAMS.current,
  size: DEFAULT_QUERY_PARAMS.size,
  total: 0
});

// 文章列表
const articleList = ref<ArticleInfo[]>([]);

// 选中的文章
const selectedArticles = ref<ArticleInfo[]>([]);

// 当前操作的文章
const currentArticle = ref<ArticleInfo | null>(null);
const currentArticleId = ref<number | null>(null);

// 统计数据
const statistics = ref<ArticleStatisticsType | null>(null);

// 计算属性
const hasSelection = computed(() => selectedArticles.value.length > 0);

// 处理日期范围变化
const handleDateRangeChange = (value: [string, string] | null) => {
  if (value) {
    searchForm.startTime = value[0];
    searchForm.endTime = value[1];
  } else {
    searchForm.startTime = "";
    searchForm.endTime = "";
  }
};

// 搜索
const handleSearch = () => {
  pagination.current = 1;
  loadArticleList();
};

// 重置搜索
const handleReset = () => {
  searchFormRef.value?.resetFields();
  dateRange.value = null;
  Object.assign(searchForm, {
    ...DEFAULT_QUERY_PARAMS,
    title: "",
    authorName: "",
    categoryName: "",
    status: undefined,
    isTop: undefined,
    isOriginal: undefined,
    tags: "",
    keyword: "",
    startTime: "",
    endTime: ""
  });
  pagination.current = 1;
  loadArticleList();
};

// 刷新
const handleRefresh = () => {
  loadArticleList();
  if (showStatistics.value) {
    loadStatistics();
  }
};

// 切换统计显示
const toggleStatistics = () => {
  showStatistics.value = !showStatistics.value;
  if (showStatistics.value && !statistics.value) {
    loadStatistics();
  }
};

// 处理选择变化
const handleSelectionChange = (selection: ArticleInfo[]) => {
  selectedArticles.value = selection;
};

// 处理排序变化
const handleSortChange = ({
  prop,
  order
}: {
  prop: string;
  order: string | null;
}) => {
  if (prop && order) {
    searchForm.sortField = prop;
    searchForm.sortOrder = order === "ascending" ? "asc" : "desc";
    loadArticleList();
  }
};

// 处理页码变化
const handleCurrentChange = (current: number) => {
  pagination.current = current;
  loadArticleList();
};

// 处理页面大小变化
const handleSizeChange = (size: number) => {
  pagination.size = size;
  pagination.current = 1;
  loadArticleList();
};

// 查看详情
const handleViewDetail = (article: ArticleInfo) => {
  currentArticleId.value = article.id;
  detailDialogVisible.value = true;
};

// 审核文章
const handleAudit = (article: ArticleInfo) => {
  currentArticle.value = article;
  auditDialogVisible.value = true;
};

// 批量操作
const handleBatchOperation = () => {
  if (!hasSelection.value) {
    ElMessage.warning(MESSAGES.VALIDATION.SELECT_ARTICLES);
    return;
  }
  batchDialogVisible.value = true;
};

// 单个操作
const handleSingleOperation = async (command: string, article: ArticleInfo) => {
  try {
    switch (command) {
      case "publish":
        await handlePublish(article);
        break;
      case "unpublish":
        await handleUnpublish(article);
        break;
      case "top":
        await handleToggleTop(article);
        break;
      case "delete":
        await handleDelete(article);
        break;
      case "restore":
        await handleRestore(article);
        break;
    }
  } catch (error) {
    console.error("操作失败:", error);
  }
};

// 发布文章
const handlePublish = async (article: ArticleInfo) => {
  try {
    await ElMessageBox.confirm(MESSAGES.CONFIRM.PUBLISH, "确认发布", {
      type: "warning"
    });

    await publishArticleApi(article.id);
    ElMessage.success(MESSAGES.SUCCESS.PUBLISH);
    loadArticleList();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error(MESSAGES.ERROR.OPERATION_FAILED);
    }
  }
};

// 下架文章
const handleUnpublish = async (article: ArticleInfo) => {
  try {
    const { value: reason } = await ElMessageBox.prompt(
      "请输入下架原因（可选）",
      "确认下架",
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        inputType: "textarea"
      }
    );

    await unpublishArticleApi(article.id, reason);
    ElMessage.success(MESSAGES.SUCCESS.UNPUBLISH);
    loadArticleList();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error(MESSAGES.ERROR.OPERATION_FAILED);
    }
  }
};

// 切换置顶状态
const handleToggleTop = async (article: ArticleInfo) => {
  try {
    const isTop = article.isTop !== 1;
    const message = isTop ? MESSAGES.CONFIRM.TOP : MESSAGES.CONFIRM.UNTOP;

    await ElMessageBox.confirm(message, "确认操作", {
      type: "warning"
    });

    await toggleTopArticleApi(article.id, isTop);
    ElMessage.success(isTop ? MESSAGES.SUCCESS.TOP : MESSAGES.SUCCESS.UNTOP);
    loadArticleList();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error(MESSAGES.ERROR.OPERATION_FAILED);
    }
  }
};

// 删除文章
const handleDelete = async (article: ArticleInfo) => {
  try {
    await ElMessageBox.confirm(MESSAGES.CONFIRM.DELETE, "确认删除", {
      type: "warning"
    });

    await deleteArticleApi(article.id);
    ElMessage.success(MESSAGES.SUCCESS.DELETE);
    loadArticleList();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error(MESSAGES.ERROR.OPERATION_FAILED);
    }
  }
};

// 恢复文章
const handleRestore = async (article: ArticleInfo) => {
  try {
    await ElMessageBox.confirm(MESSAGES.CONFIRM.RESTORE, "确认恢复", {
      type: "warning"
    });

    await restoreArticleApi(article.id);
    ElMessage.success(MESSAGES.SUCCESS.RESTORE);
    loadArticleList();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error(MESSAGES.ERROR.OPERATION_FAILED);
    }
  }
};

// 加载文章列表
const loadArticleList = async () => {
  try {
    loading.value = true;
    const params = {
      ...searchForm,
      current: pagination.current,
      size: pagination.size
    };

    const { data } = await getArticleListApi(params);

    // 处理两种可能的响应格式
    if (data?.code === 200 && data.data) {
      // 标准格式: {code: 200, data: {records: [], total: 0}}
      articleList.value = data.data.records;
      pagination.total = data.data.total;
    } else if (data?.records && Array.isArray(data.records)) {
      // 直接返回分页数据格式: {records: [], total: 0}
      articleList.value = data.records;
      pagination.total = data.total;
    } else {
      ElMessage.warning("数据格式异常");
    }
  } catch (error) {
    console.error("加载文章列表失败:", error);
    ElMessage.error(MESSAGES.ERROR.LOAD_FAILED);
  } finally {
    loading.value = false;
  }
};

// 加载统计数据
const loadStatistics = async () => {
  try {
    const { data } = await getArticleStatisticsApi();
    console.log("文章统计API响应:", data);

    if (data?.code === 200 && data.data) {
      // 标准格式: {code: 200, data: {totalCount: 23, ...}}
      const rawData = data.data;
      console.log("原始统计数据:", rawData);

      // 转换驼峰格式到下划线格式
      statistics.value = {
        total_count: rawData.totalCount || 0,
        published_count: rawData.publishedCount || 0,
        draft_count: rawData.draftCount || 0,
        pending_count: rawData.pendingCount || 0,
        rejected_count: rawData.rejectedCount || 0,
        deleted_count: rawData.deletedCount || 0,
        unpublished_count: rawData.unpublishedCount || 0,
        top_count: rawData.topCount || 0,
        total_views: rawData.totalViews || 0,
        total_likes: rawData.totalLikes || 0,
        total_comments: rawData.totalComments || 0,
        total_collects: rawData.totalCollects || 0
      };
      console.log("转换后的统计数据:", statistics.value);
    } else if (data?.totalCount !== undefined) {
      // 直接返回统计数据格式: {totalCount: 23, ...}
      console.log("直接格式统计数据:", data);

      // 转换驼峰格式到下划线格式
      statistics.value = {
        total_count: data.totalCount || 0,
        published_count: data.publishedCount || 0,
        draft_count: data.draftCount || 0,
        pending_count: data.pendingCount || 0,
        rejected_count: data.rejectedCount || 0,
        deleted_count: data.deletedCount || 0,
        unpublished_count: data.unpublishedCount || 0,
        top_count: data.topCount || 0,
        total_views: data.totalViews || 0,
        total_likes: data.totalLikes || 0,
        total_comments: data.totalComments || 0,
        total_collects: data.totalCollects || 0
      };
      console.log("转换后的统计数据:", statistics.value);
    } else {
      console.warn("未识别的统计数据格式:", data);
    }
  } catch (error) {
    console.error("加载统计数据失败:", error);
  }
};

// 格式化头像URL
const formatAvatarUrl = (url: string): string => {
  if (!url) return "";

  // 如果已经是完整URL，直接返回
  if (url.startsWith("http://") || url.startsWith("https://")) {
    return url;
  }

  // 如果是相对路径，添加基础URL
  const baseURL = import.meta.env.DEV
    ? "http://localhost:8081"
    : "http://localhost:8081";
  return baseURL + url;
};

// 组件挂载时加载数据
onMounted(() => {
  loadArticleList();
  loadStatistics();
});
</script>

<style lang="scss" scoped>
// 响应式设计
@media (width <= 768px) {
  .article-management {
    padding: 10px;

    .search-form {
      :deep(.el-col) {
        margin-bottom: 10px;
      }
    }

    .operation-bar {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;

      .left-operations {
        justify-content: center;
      }

      .right-info {
        justify-content: center;
      }
    }

    .action-buttons {
      flex-direction: column;

      .el-button {
        width: 100%;
      }
    }
  }
}

.article-management {
  padding: 20px;

  .search-card,
  .operation-card,
  .table-card {
    margin-bottom: 20px;

    :deep(.el-card__body) {
      padding: 20px;
    }
  }

  .search-form {
    :deep(.el-form-item) {
      margin-bottom: 16px;
    }

    :deep(.el-form-item__label) {
      padding-right: 12px;
      text-align: right;
    }
  }

  .operation-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-operations {
      display: flex;
      gap: 12px;
    }

    .right-info {
      display: flex;
      gap: 16px;
      font-size: 14px;
      color: #606266;

      .selection-info {
        font-weight: 500;
        color: #409eff;
      }
    }
  }

  .author-info {
    display: flex;
    gap: 8px;
    align-items: center;

    .author-name {
      font-size: 14px;
      color: #303133;
    }
  }

  .action-buttons {
    display: flex;
    gap: 8px;

    .el-button {
      padding: 4px 8px;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
